<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formInline">
      <el-form-item label="查询类型">
        <el-select v-model="formInline.region" placeholder="请选择" @change="changediv">
          <el-option v-for="item in regions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="查询输入：">
        <el-input v-model="formInline.inputzhi" placeholder="请输入查询代号或名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="onSubmit()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 查询到的内容展示 -->
    <!-- 可按医生代号查询该医生的相关信息 -->
    <div v-show="isshow == 1">
      <el-divider></el-divider>
      <span style="padding-right:40px">医生编号：{{ yisheng.doctorNo }}</span>
      <span style="padding-right:40px">医生姓名：{{ yisheng.doctorName }}</span>
      <span style="padding-right:40px">所属科室：{{ yisheng.subjectName }}</span>
      <el-divider></el-divider>
      <!-- 该医生的病人信息 -->
      <el-table :data="persons" style="width: 100%;margin:auto;line-height:20px;marginTop: 20px;">
        <el-table-column prop="personNo" label="医疗卡号" align="center"></el-table-column>
        <el-table-column prop="personName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="personSex" label="性别" align="center"></el-table-column>
        <el-table-column prop="telephone" label="电话号码" align="center"></el-table-column>
        <el-table-column prop="contactAddress" label="地址" align="center"></el-table-column>
        <el-table-column prop="married" label="婚否" align="center"></el-table-column>
        <el-table-column prop="registerDate" label="register" align="center"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination layout="prev, pager, next" @current-change="changePage" :page-size="pagesize" :pageCount="maxPage" :total="count"></el-pagination>
      </div>
    </div>
    <!-- 可按药品代号查询该药品的相关信息 -->
    <div v-show="isshow == 2">
      <el-divider></el-divider>
      <span>药品代号：{{ yaopin.mediNo }}</span>
      <br />
      <span>药品名称：{{ yaopin.mediName }}</span>
      <br />
      <span>specification：{{ yaopin.specification }}</span>
      <br />
      <span>药品单位：{{ yaopin.unit }}</span>
      <br />
      <span>药品价格：{{ yaopin.unitPrice }}</span>
      <br />
      <span>药品quality：{{ yaopin.quality }}</span>
      <br />
      <span>药品storeLimit：{{ yaopin.storeLimit }}</span>
      <br />
      <span>药品isC：{{ yaopin.isC }}</span>
      <br />
      <el-divider></el-divider>
    </div>
    <!-- 可按医疗卡号查询该卡的的相关信息 -->
    <div v-show="isshow == 3">
      <el-divider></el-divider>
      <span>医疗卡号：{{ ka.personNo }}</span>
      <br />
      <span>姓名：{{ ka.personName }}</span>
      <br />
      <span>departmentNo：{{ ka.departmentNo }}</span>
      <br />
      <span>titleNo：{{ ka.titleNo }}</span>
      <br />
      <span>性别：{{ ka.personSex }}</span>
      <br />
      <span>chargeNo：{{ ka.chargeNo }}</span>
      <br />
      <span>电话号码：{{ ka.telephone }}</span>
      <br />
      <span>地址：{{ ka.contactAddress }}</span>
      <br />
      <span>生日：{{ ka.birthDate }}</span>
      <br />
      <span>婚姻状况：{{ ka.married }}</span>
      <br />
      <span>registerDate：{{ ka.registerDate }}</span>
      <br />
      <span>cardMark：{{ ka.cardMark }}</span>
      <br />
      <el-divider></el-divider>
    </div>
    <!-- 可根据输入的药品名称查询到相关信息 -->
    <div v-show="isshow == 4">
      <el-divider></el-divider>
      <el-table :data="nowdata" style="width: 100%;margin:auto;line-height:20px;marginTop: 20px;" :class="{ hide: !yaopindata }">
        <el-table-column prop="mediNo" label="药品代号" align="center"></el-table-column>
        <el-table-column prop="mediName" label="药品名称" align="center"></el-table-column>
        <el-table-column prop="specification" label="描述" align="center"></el-table-column>
        <el-table-column prop="unit" label="单位" align="center"></el-table-column>
        <el-table-column prop="unitPrice" label="价格" align="center"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination layout="prev, pager, next" @current-change="changePage" :page-size="pagesize" :pageCount="maxPage" :total="count"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex';
// import { URL } from "../../../../utils/fanapi";
export default {
  name: '',
  data() {
    return {
      formInline: {
        inputzhi: '',
        region: '',
      },
      regions: [
        { value: '1', label: '医生代号' },
        { value: '2', label: '药品代号' },
        { value: '3', label: '医疗卡代号' },
        { value: '4', label: '药品名称' },
      ],
      isshow: false,
      //医生信息
      yisheng: {
        doctorNo: '',
        doctorName: '',
        subjectName: '',
      },
      // 该医生的病人信息
      persons: [],
      pagesize: 3,
      nowpage: 1,
      count: 0,
      //药品信息
      yaopin: {
        mediNo: '',
        specification: '',
        unit: '',
        unitPrice: '',
        mediName: '',
        quality: '',
        storeLimit: '',
        isC: '',
      },
      //医疗卡信息
      ka: {
        personNo: '',
        personName: '',
        departmentNo: '',
        titleNo: '',
        personSex: '',
        chargeNo: '',
        telephone: '',
        contactAddress: '',
        birthDate: '',
        married: '',
        registerDate: '',
        cardMark: '',
      },
      yaopindata: [],
    };
  },
  computed: {
    maxPage() {
      return Math.ceil(this.count / this.pagesize);
    },
    nowdata() {
      let start = (this.nowpage - 1) * this.pagesize;
      let end = start + this.pagesize;
      return this.yaopindata.slice(start, end);
    },
  },
  created() {
    this.onSubmit({
      nowpage: this.nowpage,
      pagesize: this.pagesize,
    });
  },
  methods: {
    ...mapActions(['tongyong']),
    changediv(val) {
      if (val == 1) {
        this.isshow = 1;
      } else if (val == 2) {
        this.isshow = 2;
      } else if (val == 3) {
        this.isshow = 3;
      } else if (val == 4) {
        this.isshow = 4;
      } else {
        return;
      }
    },
    changePage(val) {
      this.nowpage = val;
      this.onSubmit();
    },
    onSubmit() {
      if (this.formInline.region == 1) {
        // 医生
        /*this.$axios({
          url:
            URL +
            "/zsdx-outpatient-service/menzhen/doctor/select/selectByDoctorNo",
          method: "post",
          data: {
            no: this.formInline.inputzhi,
            page: this.nowpage,
            pageSize: this.pagesize,
          },
        }).then((data) => {
          console.log(data);
          if (data.data.msg == "success") {
            this.yisheng = data.data.data.doctor;
            this.persons = data.data.data.persons;
            this.count = data.data.count;
          } else {
            console.log(data.data.msg);
          }
        });*/
        this['tongyong']({
          name: 'SEARCH_DOCTOR',
          data: {
            no: this.formInline.inputzhi,
            page: this.nowpage,
            pageSize: this.pagesize,
          },
        }).then(data => {
          console.log(data);
          if (data.data.msg == 'success') {
            this.yisheng = data.data.data.doctor;
            this.persons = data.data.data.persons;
            this.count = data.data.count;
          } else {
            console.log(data.data.msg);
          }
        });
      } else if (this.formInline.region == 2) {
        // 药品代号
        /*this.$axios({
          url:
            URL +
            "/zsdx-outpatient-service/menzhen/doctor/select/selectByMediNo/" +
            this.formInline.inputzhi,
          method: "post",
          data: this.formInline.inputzhi,
        }).then((data) => {
          console.log(data);
          console.log(data.data);
          if (data.data.msg == "success") {
            this.yaopin = data.data.data;
          } else {
            console.log(data.data.msg);
          }
        });*/
        this['tongyong']({
          name: 'SEARCH_YAOID',
          data: { no: this.formInline.inputzhi },
        }).then(data => {
          console.log(data);
          console.log(data.data);
          if (data.data.msg == 'success') {
            this.yaopin = data.data.data;
          } else {
            console.log(data.data.msg);
          }
        });
      } else if (this.formInline.region == 3) {
        //医疗卡
        /* this.$axios({
          url:
            URL +
            "/zsdx-outpatient-service/menzhen/doctor/select/selectByPersonNo/" +
            this.formInline.inputzhi,
          method: "post",
          data: this.formInline.inputzhi,
        }).then((data) => {
          console.log(data.data);
          if (data.data.msg == "success") {
            this.ka = data.data.data;
          } else {
            console.log(data.data.msg);
          }
        });*/
        this['tongyong']({
          name: 'SEARCH_KA',
          data: { no: this.formInline.inputzhi },
        }).then(data => {
          console.log(data.data);
          if (data.data.msg == 'success') {
            this.ka = data.data.data;
          } else {
            console.log(data.data.msg);
          }
        });
      } else if (this.formInline.region == 4) {
        //药品名
        /* this.$axios({
          url:
            URL +
            "/zsdx-outpatient-service/menzhen/kanbing/select/medicineByName",
          method: "get",
          params: { mediName: this.formInline.inputzhi },
        }).then((data) => {
          console.log(data);
          if (data.data.msg == "success") {
            this.yaopindata = data.data.data;
            this.count = data.data.data.length;
          } else {
            console.log(data.data.msg);
          }
        });*/
        this['tongyong']({
          name: 'SEARCH_YAONAME',
          params: { mediName: this.formInline.inputzhi },
        }).then(data => {
          console.log(data);
          if (data.data.msg == 'success') {
            this.yaopindata = data.data.data;
            this.count = data.data.data.length;
          } else {
            console.log(data.data.msg);
          }
        });
      } else {
        return;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.hide {
  opacity: 0;
}
</style>
